<template>
	<view>
		<view style="padding-bottom: 120rpx;">
			<uni-section title="客户信息" type="line">
				<view class="formContainer">
					<uni-forms ref="form">
						<uni-forms-item label="客户类型" required>
							<!-- <uni-data-checkbox v-model="formData.memberType" :localdata="customerTypes" /> -->
							<uni-data-select v-model="formData.memberType" :localdata="customerTypes" :clear="false">
							</uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="客户来源" required>
							<!-- <uni-data-checkbox v-model="formData.memberSource" :localdata="memberSources" /> -->
							<uni-data-select v-model="formData.memberSource" :localdata="memberSources" :clear="false">
							</uni-data-select>
						</uni-forms-item>
						<!-- 个人客户 -->
						<block v-if="formData.memberType == 2">
							<uni-forms-item label="客户名称" required>
								<u--input placeholder="请输入客户名称" v-model="formData.memberName">
								</u--input>
							</uni-forms-item>
							<uni-forms-item label="联系电话" required>
								<u--input placeholder="请输入联系电话" type="number" maxlength="11" v-model="formData.contactPhone">
								</u--input>
							</uni-forms-item>

							<uni-forms-item label="联系地址">
								<u--input placeholder="请输入联系地址" v-model="formData.contactAddress"></u--input>
							</uni-forms-item>
						</block>
						<!-- 企业客户 -->
						<block v-else>
							<uni-forms-item label="企业名称" required>
								<u--input placeholder="请输入企业名称" v-model="formData.enterpriseName"></u--input>
							</uni-forms-item>

							<uni-forms-item label="统一社会信用代码">
								<u--input placeholder="请输入统一社会信用代码" v-model="formData.creditCode"></u--input>
							</uni-forms-item>

							<uni-forms-item label="企业地址">
								<u--input placeholder="请输入联系地址" v-model="formData.enterpriseAdderss"></u--input>
							</uni-forms-item>
							<uni-forms-item label="营业执照" labelWidth="150" labelPosition="top">
								<view class="flex-xy-center">
									<view class="flex-colum-center">
										<sr-upload :isCustom="true" ref="upload1" maxCount="1"
											@uploadResult="uploadYYZZ"></sr-upload>
										<text style="color: #666;font-size: 22rpx;margin-top: 20rpx;">上传营业执照</text>
									</view>
								</view>
							</uni-forms-item>
							<!-- <uni-forms-item label="营业执照">
								<sr-upload ref="upload1" maxCount="1" @uploadResult="uploadYYZZ"></sr-upload>
							</uni-forms-item> -->
							<uni-forms-item label="企业联系人" required>
								<u--input placeholder="请输入企业联系人" v-model="formData.memberName"></u--input>
							</uni-forms-item>
							<uni-forms-item label="联系电话" required>
								<u--input placeholder="请输入联系电话" type="number" maxlength="11" v-model="formData.contactPhone">
								</u--input>
							</uni-forms-item>

							<uni-forms-item label="联系地址">
								<u--input placeholder="请输入联系地址" v-model="formData.contactAddress"></u--input>
							</uni-forms-item>
						</block>

					</uni-forms>
				</view>
			</uni-section>

			<uni-section :title="formData.memberType == 2 ? '身份证件信息' : '联系人身份证件信息'" type="line">
				<view class="formContainer">
					<uni-forms ref="form">
						<uni-forms-item label="证件类型">
							<!-- <uni-data-checkbox v-model="formData.documentType" :localdata="documentTypes" /> -->
							<uni-data-select v-model="formData.documentType" :localdata="documentTypes" :clear="false">
							</uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="证件号码">
							<u--input placeholder="请输入证件号码" v-model="formData.cardId">
							</u--input>
						</uni-forms-item>
						<uni-forms-item label="失效时间">
							<uni-datetime-picker type="date" v-model="formData.cardValidity" />
						</uni-forms-item>
						<uni-forms-item label="身份证件照片" labelWidth="150" labelPosition="top">
							<view class="flex-row-center-sb">
								<view class="flex-colum-center">
									<sr-upload :isCustom="true" ref="upload2" maxCount="1"
										@uploadResult="uploadIdCard1"></sr-upload>
									<text style="color: #666;font-size: 22rpx;margin-top: 20rpx;">上传正面</text>
								</view>
								<view class="flex-colum-center">
									<sr-upload :isCustom="true" ref="upload3" maxCount="1"
										@uploadResult="uploadIdCard2"></sr-upload>
									<text style="color: #666;font-size: 22rpx;margin-top: 20rpx;">上传反面</text>
								</view>
							</view>
						</uni-forms-item>

					</uni-forms>

				</view>
			</uni-section>

			<uni-section :title="formData.memberType == 2 ? '驾驶证信息' : '联系人驾驶证信息'" type="line">
				<view class="formContainer">
					<uni-forms ref="form">
						<uni-forms-item label="驾驶证类型">
							<!-- <uni-data-checkbox v-model="formData.driverType" :localdata="driverTypes" /> -->
							<uni-data-select v-model="formData.drivingType" :localdata="driverTypes" :clear="false">
							</uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="失效时间">
							<uni-datetime-picker type="date" v-model="formData.drivingValidity" />
						</uni-forms-item>
						<uni-forms-item label="驾驶证照片" labelWidth="150" labelPosition="top">
							<view class="flex-row-center-sb">
								<view class="flex-colum-center">
									<sr-upload :isCustom="true" ref="upload4" maxCount="1"
										@uploadResult="uploadDriver1"></sr-upload>
									<text style="color: #666;font-size: 22rpx;margin-top: 20rpx;">上传正面</text>
								</view>
								<view class="flex-colum-center">
									<sr-upload :isCustom="true" ref="upload5" maxCount="1"
										@uploadResult="uploadDriver2"></sr-upload>
									<text style="color: #666;font-size: 22rpx;margin-top: 20rpx;">上传反面</text>
								</view>
							</view>
						</uni-forms-item>

					</uni-forms>
				</view>
			</uni-section>

			<uni-section title="其他说明" type="line">
				<view class="formContainer">
					<uni-forms ref="form">
						<uni-forms-item label="备注" labelPosition="top">
							<view>
								<u--textarea v-model="formData.remark" placeholder="请输入500字以内的备注信息" count
									maxlength="500"></u--textarea>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-section>
		</view>
		<button type="info" class="sub-btn" @click="commitCustomer">确认</button>

	</view>
</template>

<script>
	import srUpload from '@/components/upload/sr-upload.vue'
	import * as customerApi from '@/api/cutomer-api.js'
	import settings from '@/settings.js';
	export default {
		components: {
			srUpload
		},
		data() {
			return {
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				fileList5: [],
				type: 0,
				customerTypes: [{
						value: 2,
						text: '个人'
					},
					{
						value: 1,
						text: '企业'
					}
				],

				memberSources: [{
						value: 1,
						text: '搜索'
					},
					{
						value: 2,
						text: '分享'
					}, {
						value: 3,
						text: '扫码'
					},
					{
						value: 4,
						text: '手动录入'
					}, {
						value: 5,
						text: '其他'
					}
				],

				// 身份证件类型
				documentTypes: [{
						value: 1,
						text: '身份证'
					},
					{
						value: 2,
						text: '国际护照'
					},
					{
						value: 3,
						text: '台胞证'
					},
					{
						value: 4,
						text: '军人证'
					},
					{
						value: 5,
						text: '港澳通行证'
					}
				],
				// 驾驶证件类型
				driverTypes: [{
						value: 'A1',
						text: 'A1'
					},
					{
						value: 'A2',
						text: 'A2'
					},
					{
						value: 'A3',
						text: 'A3'
					},
					{
						value: 'B1',
						text: 'B1'
					},
					{
						value: 'B2',
						text: 'B2'
					},
					{
						value: 'C1',
						text: 'C1'
					},
					{
						value: 'C2',
						text: 'C2'
					},
					{
						value: 'C3',
						text: 'C3'
					},
					{
						value: 'C4',
						text: 'C4'
					}
				],

				formData: {
					memberNo: '',
					memberType: 2,
					memberSource: 4,
					documentType: 1,
					drivingType: 'C1',
					remark: ''

				}
			}
		},
		onLoad(op) {
			if (op) {
				this.type = op.type;
				this.formData.memberNo = op.memberNo;
				uni.setNavigationBarTitle({
					title: this.type == 1 ? '编辑客户' : '新增客户'
				})
			}
			if (this.type == 1) {
				this.getMemberDetail();
			}
		},
		methods: {
			// 编辑回显获取客户信息
			getMemberDetail() {
				customerApi.memberDetail(this.formData.memberNo).then(res => {

					this.formData = res.data;
					this.formData.remark = this.formData.remark || '';
					if (!this.$u.test.isEmpty(this.formData.businessLicenseUrl)) {
						let url = settings.baseImageUrl + this.formData.businessLicenseUrl;
						this.$refs.upload1.fileList = [{
							message: '',
							status: 'success',
							thumb: url,
							type: 'image',
							url: this.formData.businessLicenseUrl
						}]
					}
					if (!this.$u.test.isEmpty(this.formData.idCardUrl)) {
						let url = settings.baseImageUrl + this.formData.idCardUrl;
						this.$refs.upload2.fileList = [{
							message: '',
							status: 'success',
							thumb: url,
							type: 'image',
							url: this.formData.idCardUrl
						}]
					}
					if (!this.$u.test.isEmpty(this.formData.idCardBackUrl)) {
						let url = settings.baseImageUrl + this.formData.idCardBackUrl;
						this.$refs.upload3.fileList = [{
							message: '',
							status: 'success',
							thumb: url,
							type: 'image',
							url: this.formData.idCardBackUrl
						}]
					}
					if (!this.$u.test.isEmpty(this.formData.driverUrl)) {
						let url = settings.baseImageUrl + this.formData.driverUrl;
						this.$refs.upload4.fileList = [{
							message: '',
							status: 'success',
							thumb: url,
							type: 'image',
							url: this.formData.driverUrl
						}]
					}
					if (!this.$u.test.isEmpty(this.formData.driverBackUrl)) {
						let url = settings.baseImageUrl + this.formData.driverBackUrl;
						this.$refs.upload5.fileList = [{
							message: '',
							status: 'success',
							thumb: url,
							type: 'image',
							url: this.formData.driverBackUrl
						}]
					}


				})
			},

			// 上传营业执照
			uploadYYZZ(data) {
				this.formData.businessLicenseUrl = data[0] || '';
				this.$forceUpdate();
			},
			// 身份证照片 
			uploadIdCard1(data) {
				this.formData.idCardUrl = data[0] || '';
				if (this.$u.test.isEmpty(this.formData.cardId)) {
					customerApi.recognitionCertificate({
						type: 1,
						url: this.formData.idCardUrl
					}).then(response => {
						this.$u.toast(response.msg);
						this.formData.cardId = response.data.idCard; // 证件号
						this.formData.memberName = response.data.name; // 真实姓名
					})
				}
				this.$forceUpdate();
			},
			uploadIdCard2(data) {
				console.log(data);
				this.formData.idCardBackUrl = data[0] || '';
				if (this.$u.test.isEmpty(this.formData.cardId)) {
					customerApi.recognitionCertificate({
						type: 2,
						url: this.formData.idCardBackUrl
					}).then(response => {
						this.$u.toast(response.msg);
						this.formData.cardValidity = response.data.endTime;
					})
				}
				this.$forceUpdate();
			},
			// 驾驶证正面照片 
			uploadDriver1(data) {
				this.formData.driverUrl = data[0] || '';
				customerApi.recognitionCertificate({
					type: 3,
					url: this.formData.driverUrl
				}).then(response => {
					this.$u.toast(response.msg);
					this.formData.drivingId = response.data.driverNo; // 驾驶证编号
					this.formData.drivingType = response.data.driverType; // 驾驶证类型
					this.formData.drivingValidity = response.data.endTime; // 驾驶证有效期
				})
				this.$forceUpdate();
			},
			// 驾驶证反面照片
			uploadDriver2(data) {
				this.formData.driverBackUrl = data[0] || '';
				this.$forceUpdate();
			},
			// 提交客户信息
			commitCustomer() {
				
				if (uni.$u.test.mobile(this.formData.contactPhone)) {
					if (this.type == 1) {
						this.formData.lastLoginTime=null;
						customerApi.editMember(this.formData).then((response) => {
							this.$u.toast('编辑成功')
							uni.$emit('refreshCustomer');
							uni.navigateBack({})
						})
					} else {
						customerApi.addBasic(this.formData).then((response) => {
							this.$u.toast('新增成功')
							uni.$emit('chooseCustomer', response.data);
							uni.navigateBack({
								delta: 2
							})
						})
					}
				} else {
					this.$u.toast('请输入正确的手机号')
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.formContainer {
		margin: 20rpx;
		padding: 24rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}
</style>
